<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button></ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>

        <div class="current-profile-icon" menu-toggle="left">
          <div class="avatar-in-header" ng-style="{'background-color': '#'+($root.selectedProfile.avatarColor || '0b74b2')}">
            <img src="img/streama-profile-smiley.png" alt="">
          </div>
          {{$root.selectedProfile.profileName}}
        </div>
      </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view name="content"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Navigation</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ui-sref="main.dash">
          {{'DASHBOARD.TITLE' | translate}}
        </ion-item>
        <ion-item menu-close ui-sref="main.dash" ng-click="mainVm.toggleSearch()">
          <i class="ion-search"></i>Search
        </ion-item>
        <div class="item item-divider">
          Available profiles
        </div>
        <ion-item menu-close ng-repeat="profile in mainVm.profiles"
                  ng-class="{'active-darkgrey': (profile.id == $root.selectedProfile.id)}"
                   ng-click="mainVm.setProfile(profile)">
          <div class="profile-item-container">
            <div class="avatar-in-header" ng-style="{'background-color': '#'+(profile.avatarColor || '0b74b2')}">
              <img src="img/streama-profile-smiley.png" alt="">
            </div>
            {{profile.profileName}}
          </div>
        </ion-item>
        <ion-item menu-close ng-click="mainVm.goToManageProfiles()">
          Manage Profiles
        </ion-item>
        <div class="item item-divider">
          Browse by Genre
        </div>
        <ion-item menu-close  ng-class="{'active': (genre.id == mainVm.selectedGenre.id)}" ng-repeat="genre in mainVm.genres" ng-click="mainVm.setGenre(genre)">
          {{genre.name}}
        </ion-item>
        <div class="item item-divider">
          Account
        </div>
        <ion-item menu-close ng-click="$root.changeServerConnection()">
          Change Server-Connection
        </ion-item>
        <ion-item menu-close ng-click="$root.logout()">
          <i class="ion-power"></i> Logout
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>
